<navbar th:fragment="navbar" class="header-wrapper main-header">
    <div class="header-inner-wrapper">
        <div class="logo-wrapper"><a href="#" class="admin-logo"><img th:src="@{assets/img/logo.png}" alt=""></a></div>
        <div class="header-right">
            <div class="header-left">
                <div class="header-links"><a href="javascript:void(0);" class="toggle-btn"><span></span></a></div>
                <div class="search-link header-links">
                    <a class="fas fa-globe-asia fa-2x" href="/" target="_blank"></a>
                </div>
                <div class="search-link header-links">
                    <a href='https://gitee.com/taisan/tarzan-navigation'><img
                            src='https://gitee.com/taisan/tarzan-navigation/widgets/widget_6.svg'
                            alt='Fork me on Gitee'/></a>
                </div>
            </div>
            <div class="header-controls">
            <div class="notification-wrapper header-links">
                <a href="javascript:void(0);" id="notification-info" th:class="${todoItems?.total>0?'notification-info':''}">
                    <span class="header-icon">
            <svg  viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
              <path d="m450.201 407.453c-1.505-.977-12.832-8.912-24.174-32.917-20.829-44.082-25.201-106.18-25.201-150.511 0-.193-.004-.384-.011-.576-.227-58.589-35.31-109.095-85.514-131.756v-34.657c0-31.45-25.544-57.036-56.942-57.036h-4.719c-31.398 0-56.942 25.586-56.942 57.036v34.655c-50.372 22.734-85.525 73.498-85.525 132.334 0 44.331-4.372 106.428-25.201 150.511-11.341 24.004-22.668 31.939-24.174 32.917-6.342 2.935-9.469 9.715-8.01 16.586 1.473 6.939 7.959 11.723 15.042 11.723h109.947c.614 42.141 35.008 76.238 77.223 76.238s76.609-34.097 77.223-76.238h109.947c7.082 0 13.569-4.784 15.042-11.723 1.457-6.871-1.669-13.652-8.011-16.586zm-223.502-350.417c0-14.881 12.086-26.987 26.942-26.987h4.719c14.856 0 26.942 12.106 26.942 26.987v24.917c-9.468-1.957-19.269-2.987-29.306-2.987-10.034 0-19.832 1.029-29.296 2.984v-24.914zm29.301 424.915c-25.673 0-46.614-20.617-47.223-46.188h94.445c-.608 25.57-21.549 46.188-47.222 46.188zm60.4-76.239c-.003 0-213.385 0-213.385 0 2.595-4.044 5.236-8.623 7.861-13.798 20.104-39.643 30.298-96.129 30.298-167.889 0-63.417 51.509-115.01 114.821-115.01s114.821 51.593 114.821 115.06c0 .185.003.369.01.553.057 71.472 10.25 127.755 30.298 167.286 2.625 5.176 5.267 9.754 7.861 13.798z"/>
            </svg>
            </span>
                    <span class="count-notification"></span>
                </a>
                <div class="recent-notification">
                        <div class="drop-down-header">
                            <h4>所有通知</h4>
                            <p id="message_num" th:text="你有+${todoItems?.total}+条新消息"></p>
                        </div>
                        <ul id="notification-list">
                            <li>
                                <a th:href="@{#comments}">
                                <h5><i class="far fa-envelope mr-2"></i>待审核评论</h5>
                                <p th:if="${todoItems?.toAuditComments>0}">你有<span id="comment-todo">[[${todoItems?.toAuditComments}]]</span>条新消息</p>
                            </a>
                            </li>
                            <li>
                                <a th:href="@{#websites/review}">
                                    <h5><i class="fas fa-globe-asia mr-2"></i>待审核网站</h5>
                                    <p th:if="${todoItems?.toAuditWebsites>0}">你有<span id="website-todo">[[${todoItems?.toAuditWebsites}]]</span>条新消息</p>
                                </a>
                            </li>
                            <li>
                                <a th:href="@{#links}">
                                    <h5><i class="fas fa-link mr-2"></i>待审核友链</h5>
                                    <p th:if="${todoItems?.toAuditLinks>0}">你有<span id="link-todo">[[${todoItems?.toAuditLinks}]]</span>条新消息</p>
                                </a>
                            </li>
                       <!--     <li th:each="comment,temp: ${comments}" th:if="${temp.index} lt 3">
                                <a th:href="@{#comments}">
                                <h5><i class="far fa-envelope mr-2"></i>待审核评论</h5>
                                    <span th:utext="${comment?.content}"></span>
                                </a>
                            </li>-->
                        </ul>
<!--                        <div class="drop-down-footer"><a th:href="@{#comments}" class="btn sm-btn">查看全部</a></div>-->
                    </div>
            </div>
            <div class="user-info-wrapper header-links">
                <a href="javascript:void(0);" class="user-info"><img th:src="${loginUser?.img?.base64?:'assets/img/user.png'}" alt="" class="user-img">
                <div class="blink-animation"><span class="blink-circle"></span><span class="main-circle"></span></div>
                 </a>
                <div class="user-info-box">
                    <div class="drop-down-header">
                        <h4 th:text="${loginUser?.nickname}"></h4>
                     <!--   <p th:text="${loginUser?.roleName}"></p>-->
                    </div>
                    <ul>
                        <li><a th:href="@{'#system/userInfo'}"><i class="far fa-edit"></i>个人资料</a></li>
                        <li><a th:href="@{'#system/password'}"><i class="fas fa-cog"></i>修改密码</a></li>
                        <li><a th:href="@{'/system/logout'}"><i class="fas fa-sign-out-alt"></i>退出登录 </a></li>
                    </ul>
                </div>
            </div>
            </div>
        </div>
    </div>
</navbar>